@import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Poppins', sans-serif;
}

body {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
}

body::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('/static/image/login.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
}

body::after {
	content: '';
	position: absolute;
	inset: 0;
	background-image: url('/static/image/register.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: 0.5s;
}

body.signup::after {
	opacity: 1;
}

.container {
	position: relative;
	width: 350px;
	height: 340px;
	border-radius: 15px;
	box-shadow: 0 5px 25px rgba(0, 0, 0, 0.25);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1000;
	transition: 0.5s;
	overflow: hidden;
}

body.signup .container {
	height: 440px;
}

.container::before {
	content: '';
	position: absolute;
	width: 100%;
	height: 100%;
	background: repeating-conic-gradient(from var(--a), #45f3ff 0%, #45f3ff 10%, transparent 10%, transparent 80%, #45f3ff 100%);
	border-radius: 20px;
	animation: animate 2.5s linear infinite;
}

body.signup .container::before {
	filter: hue-rotate(140deg);
}

@property --a {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes animate {
	0% {
		--a: 0deg
	}

	100% {
		--a: 360deg
	}
}

.container span {
	position: absolute;
	inset: 5px;
	overflow: hidden;
	border-radius: 15px;
}

.container span::before {
	content: '';
	position: absolute;
	inset: 5px;
	background-image: url('/static/image/login.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	filter: blur(10px);
}

.container span::after {
	content: '';
	position: absolute;
	inset: 5px;
	background-image: url('/static/image/login.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	filter: blur(15px);
}

body.signup .container span::before,
body.signup .container span::after {
	background-image: url('/static/image/register.jpg');
	background-attachment: fixed;
	background-size: cover;
	background-position: center;
	filter: blur(15px);
}

form {
	position: absolute;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width: 100%;
	gap: 15px;
	transition: 0.5s;
}

form#signupForm {
	left: 100%;
}

body.signup form#signinForm {
	left: -100%;
}

body.signup form#signupForm {
	left: 0;
}

form h2 {
	position: relative;
	color: #fff;
	font-size: 1.5em;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 10px;
}

form .inputBox {
	position: relative;
	width: 70%;
	display: flex;
	justify-content: space-between;
}

form .inputBox a {
	color: #fff;
	text-decoration: none;
	font-size: 0.85em;
}

form .inputBox input {
	width: 100%;
	outline: none;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.15);
	padding: 6px 15px;
	border-radius: 4px;
	font-size: 0.85em;
	color: #fff;
}

form .inputBox input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}

form .inputBox input[type="submit"] {
	background: #2196f3;
	font-weight: 500;
	cursor: pointer;
}

form#signupForm .inputBox input[type="submit"] {
	background: #f4242f;
}

form#signupForm b {
	font-weight: 500;
	color: #ffeb3b;
	text-decoration: underline;
}

.flashes {
	position: fixed;  /* 固定在视口 */
	top: 20px;        /* 距离顶部20像素 */
	left: 50%;        /* 水平居中 */
	transform: translateX(-50%); /* 通过平移实现居中 */
	list-style: none;
	padding: 0;
	margin: 0;
	width: 90%;       /* 设为视口宽度的90% */
	max-width: 600px; /* 最大宽度为600像素 */
	z-index: 1000;    /* 确保在其他元素之上 */
}

.flashes li {
	padding: 10px;         /* 内边距10像素 */
	margin: 5px 0;         /* 外边距上下各5像素 */
	border-radius: 5px;    /* 圆角 */
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

.flashes .success {
	background-color: #d4edda;  /* 成功消息的背景颜色 */
	color: #155724;              /* 成功消息的字体颜色 */
}

.flashes .danger {
	background-color: #f8d7da;   /* 警告消息的背景颜色 */
	color: #721c24;               /* 警告消息的字体颜色 */
}

